{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block content %}
<div class="container">
    <h1 class="text-center mb-5">幼儿园收费管理系统</h1>
    
    <div class="row mb-4">
        <!-- 第一行：开设班级和招收学生 -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h3 class="card-title">开设班级</h3>
                    <p class="card-text">管理幼儿园各年级班级的开设情况</p>
                    <a href="{{ url_for('list_classes') }}" class="btn btn-primary">进入管理</a>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h3 class="card-title">招收学生</h3>
                    <p class="card-text">管理学生注册和班级分配</p>
                    <a href="{{ url_for('list_registrations') }}" class="btn btn-primary">进入管理</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 第二行：收费管理和收费统计 -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h3 class="card-title">收费管理</h3>
                    <p class="card-text">管理学生各项费用的收取情况</p>
                    <a href="{{ url_for('list_payments') }}" class="btn btn-primary">进入管理</a>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h3 class="card-title">收费统计</h3>
                    <p class="card-text">查看学生费用收取的统计信息</p>
                    <a href="{{ url_for('payment_summary') }}" class="btn btn-primary">进入统计</a>
                </div>
            </div>
        </div>
    </div>
</div>

{% block styles %}
<style>
.card {
    transition: transform 0.2s;
    margin-bottom: 20px;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.card-body {
    padding: 2rem;
}
.btn-primary {
    margin-top: 1rem;
}
</style>
{% endblock %}
{% endblock %}